* {
    padding: 0;
    margin: 0;
}

html {
    font-size: 26.6667vw;
}

body {
    font-size: .14rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

input {
    background: none;
    outline: none;
    border: none;
}

button {
    border: none;
}

a {
    text-decoration: none;
    /* 解决a链接点击的时候出现高亮效果 */
    -webkit-tap-highlight-color:transparent;
}

li {
    list-style: none;
}

/* 头部 */
#header {
    width: 3.75rem;
    height: .5rem;
    background-color: #fff;
    position: relative;
    border-bottom: 1px solid #e5e5e5;
}

/* logo */
#header #logo a img {
    position: absolute;
    width: .81rem;
    height: .21rem;
    top: .16rem;
    left: .1rem;
}

/* 搜索框 */
#header #search .inputText {
    position: absolute;
    width: 2.2rem;
    height: .26rem;
    top: .12rem;
    right: .51rem;
    background-color: #f3f3f3;
    border-radius: .346rem;
    font-size: .12rem;
}

/* 搜索图标 */
#header #search .btn {
    display: inline-block;
    background: url(../image/index/btn_search.png) no-repeat;
    width: .16rem;
    height: .16rem;
    position: absolute;
    top: .16rem;
    right: .6rem;
    /* 取消轮廓突出 */
    outline: 0;
    /* 调整图片大小 */
    background-size: contain;
}

/* 登录 */
#header #register a {
    font-size: .14rem;
    color: #ffa800;
    position: absolute;
    top: .14rem;
    right: .06rem;
}

/* banner图 */
#ad {
    width: 3.75rem;
    height: 2.11rem;
}

#ad #banner img {
    width: 3.75rem;
    height: 2.11rem;
}

/* 功能区 */
#function {
    width: 3.75rem;
    height: 2.18rem;
    /* background: #ccc; */
}

#function ul {
    padding: 0 .075rem;
}

#function li {
    width: .9rem;
    height: .9rem;
    float: left;
    padding-top: .05rem;
}

#function li a {
    display: block;
    width: .9rem;
    height: .9rem;
    text-align: center;
}

#function li .icon div,
.icon1 div,
.icon2 div,
.icon3 div,
.icon4 div,
.icon5 div,
.icon6 div,
.icon7 div {
    display: block;
    background: url(../image/index/i_nav6.png) no-repeat;
    width: .9rem;
    height: .9rem;
    /* 缩小为原来的一半，等比列缩小*/
    transform: scale(0.5);
}

#function li .icon1 div {
    background-position: 0 -0.93rem;
}

#function li .icon2 div {
    background-position: -1.86rem -0.93rem;
}

#function li .icon3 div {
    background-position: -0.93rem -0.93rem;
}

#function li .icon4 div {
    background-position: -0.93rem 0;
}

#function li .icon5 div {
    background-position: -1.86rem 0;
}

#function li .icon6 div {
    background-position: -2.79rem 0;
}

#function li .icon7 div {
    background-position: -2.79rem -0.93rem;
}

#function li .icon p,
.icon1 p,
.icon2 p,
.icon3 p,
.icon4 p,
.icon5 p,
.icon6 p,
.icon7 p {
    margin-top: -.15rem;
    font-size: .16rem;
}

#function li .icon p {
    color: #ff9d00;
}

#function li .icon1 p {
    color: #feca2b;
}

#function li .icon2 p {
    color: #42d6ba;
}

#function li .icon3 p {
    color: #f94a87;
}

#function li .icon4 p {
    color: #32a2f1;
}

#function li .icon5 p {
    color: #fd4e4e;
}

#function li .icon6 p {
    color: #acce0e;
}

#function li .icon7 p {
    color: #b160df;
}




/* 推荐攻略 */
#recommend #title {
    margin-left: .1rem;
    padding-left: .05rem;
    font-size: .20rem;
    font-weight: 600;
    border-left: #ffdb35 solid .03rem;
    line-height: .24rem;
}

#recommend .db {
    width: 3.75rem;
    height: 1.8rem;
    border-bottom: .01rem solid #e5e5e5;
    position: relative;
}

#recommend .db .title {
    font-size: .18rem;
    padding: .14rem .6rem 0 .14rem;

}

#recommend .db .title a {
    color: #111;
}

#recommend .db .tag {
    position: absolute;
    right: 0;
    top: .18rem;
}

#recommend .db .tag img {
    width: .4rem;
    height: .21rem;
}

#recommend .clearfix {
    padding: .1rem .16rem 0 .15rem;
}

#recommend .db .clearfix img {
    width: 1.3rem;
    height: .9rem;
    float: left;
}

#recommend .db .clearfix .summary a {
    font-size: .14rem;
    height: .56rem;
    padding: .02rem 0 0 .15rem;
    color: #999;
    /* -webkit-line-clamp用来限制在一个块
    元素显示的文本的行数。 为了实现该效果，
    它需要组合其他的WebKit属性。
    display: -webkit-box; 必须结合的属性,
    将对象作为弹性伸缩盒子模型显示 。
   -webkit-box-orient 必须结合的属性 
   ,设置或检索伸缩盒对象的子元素的排列方式 。*/
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#recommend .clearfix .extra {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: .12rem;
    padding-left: .15rem;
}

#recommend .clearfix .extra a {
    display: block;
    font-size: .12rem;
    color: #999;
}

#recommend .clearfix .extra img {
    width: .2rem;
    height: .2rem;
    border-radius: 50%;
    float: right;
    margin-left: .05rem;
}

/* 尾部 */
#showmore{
    width: 3.75rem;
    height: .7rem;
}
#showmore a{
    display: block;
    width: 3.75rem;
    height: .7rem;
    text-align: center;
    line-height: .7rem;
    color: #2185FA;
    font-size: .14rem;
}

/* 详情 */
#footer{
    width: 3.75rem;
    height: 1.2rem;
    background-color: #2a282c;
}
#footer ul{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: .2rem 0;
}
#footer ul li a{
    display: block;
    width: .71rem;
    height: .22rem;
    background-color: #403e42;
    text-align: center;
    line-height: .22rem;
    color: #929193;
    font-size: .1rem;
    border-radius: .04rem;
    border: .01rem solid #403e42;
}
#footer ul li .light{
    color: #ff9d00;
}
#footer p{
    font-size: .1rem;
    color: #575658;
    text-align: center;
    line-height: .12rem;
}
#footer p a{
    color: #575658;
}